<template>
    <div class="homework-box">
        <div class="basic" v-show="basicShow">
            <div class="top-work">
                <div class="topwork-item">
                    <div class="left">
                        <span class="item-li">作业名称</span>
                        <span class="item-desc">作业内容占位作业内容占位作业内容占位作业内容占位作业内容占位</span>
                    </div>
                    <div class="right">
                        <img src="@/assets/homework.png" alt="">
                    </div>
                </div>
                <div class="topwork-item">
                    <div class="left">
                        <span class="item-li">发布时间</span>
                        <span class="item-desc">2025-9-15 14:05:59</span>
                    </div>
                    <div class="right">
                        <img src="@/assets/homework.png" alt="">
                    </div>
                </div>
                <div class="topwork-item">
                    <div class="left">
                        <span class="item-li">截止时间（已到期）</span>
                        <span class="item-desc">2025-9-15 14:05:59</span>
                    </div>
                    <div class="right">
                        <img src="@/assets/homework.png" alt="">
                    </div>
                </div>
                <div class="topwork-item">
                    <div class="left">
                        <span class="item-li">作业完成情况</span>
                        <span class="item-desc">35/50人（班级作业完成率70%）</span>
                    </div>
                    <div class="right">
                        <img src="@/assets/homework.png" alt="">
                    </div>
                </div>
            </div>
            <div class="tabs">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="作业列表" name="0"></el-tab-pane>
                    <el-tab-pane label="答题详情" name="1"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="search-row" v-if="homeWork">
                <div class="search-item">
                    <el-input v-model="question" placeholder="请输入课程名称"></el-input>
                    <el-select v-model="value" class="m-2" placeholder="请选择作业状态">
                        <el-option key="o" label="已完成" value="已完成" />
                        <el-option key="o" label="未完成" value="未完成" />
                    </el-select>
                    <el-button> <el-icon><Search /></el-icon>查询 </el-button>
                    <el-button @click="uploadBook()"> <el-icon><RefreshLeft /></el-icon>重置 </el-button>
                </div>
                <div class="table-area">
                    <el-table ref="multipleTableRef" :data="student" style="width: 100%">
                        <el-table-column prop="name" label="学生名称" />
                        <el-table-column prop="codes" label="学生学号" />
                        <el-table-column prop="classes" label="班级" />
                        <el-table-column prop="status" label="状态" />
                        <el-table-column prop="status" label="完成时间" />
                        <el-table-column property="name" label="操作" align="center" width="150">
                            <template #default="scope">
                                <div class="material-operations">
                                    <el-link type="primary"  @click="graphView(scope.row)" :underline="false">查看</el-link>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pages">
                        <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                    </div>
                </div>
            </div>
            <div class="search-row" v-if="!homeWork">
                <div class="table-area">
                    <el-table ref="multipleTableRef" :data="knowledge" style="width: 100%">
                        <el-table-column prop="name" label="知识点名称" />
                        <el-table-column prop="chapter" label="知识点所在章节名称" />
                        <el-table-column prop="papernum" label="试题数量" />
                        <el-table-column prop="papertate" label="试题正确率" />
                    </el-table>
                    <el-table ref="multipleTableRef" :data="pager" style="width: 100%;margin-top: 30px;">
                        <el-table-column prop="name" label="试题名称" />
                        <el-table-column prop="knowledge" label="知识点名称" />
                        <el-table-column prop="anster_true" label="答对人数" />
                        <el-table-column prop="anster_false" label="答错人数" />
                        <el-table-column prop="anster_no" label="未答人数" />
                        <el-table-column prop="papertate" label="试题正确率" />
                    </el-table>
                    <div class="pages">
                        <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                    </div>
                </div>
            </div>
        </div>
        <div class="infos" v-show="!basicShow">
            <div class="infos-div">
                <div class="stu-point">
                    <div class="point-div">
                        <div class="left">
                            <div class="basic">
                                <img src="@/assets/avatar.png" alt="">
                                <span class="names">刘莹昕</span>
                            </div>
                            <div class="infos">
                                <span class="classes">专业班级占位班级占位</span>
                                <span class="times">
                                    <span>作业完成时间</span>
                                    <span>2025-9-15 15:06:54</span>
                                </span>
                            </div>
                        </div>
                        <div class="right">
                            <div class="class-title">
                                <div class="lefts"></div>
                                <div class="rights">作业内容</div>
                            </div>
                            <el-scrollbar height="360px">
                                <div v-for="item in 30" :key="item" class="scrollbar-demo-item">
                                    <span class="names">已上传文件名称内容占位已上传文件名称内容</span>
                                    <span class="btns">
                                        <el-link type="primary" :underline="false" v-if="!progress" @click="progress = true">下载</el-link>
                                        <el-progress :percentage="50" color="#0457D5" striped striped-flow  v-if="progress" />
                                    </span>
                                </div>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
                <div class="table-area">
                    <div class="table-header">
                        <div class="header-item">
                            <span class="title">试题正确率</span>
                            <span class="desc">90%</span>
                        </div>
                        <div class="header-item">
                            <span class="title">答对</span>
                            <span class="desc">17/20</span>
                        </div>
                        <div class="header-item">
                            <span class="title">答错</span>
                            <span class="desc">3/20</span>
                        </div>
                        <div class="header-item">
                            <span class="title">答题用时</span>
                            <span class="desc">6分40秒</span>
                        </div>
                    </div>
                    <el-table ref="multipleTableRef" :data="pager" style="width: 100%;">
                        <el-table-column prop="name" label="试题名称" />
                        <el-table-column prop="papertate" label="答题选项" width="100">
                            <template #default="">
                                <div class="operations falses">
                                    <span class="useranswer">D</span> / <span class="answer">A</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import { RefreshLeft,Search } from '@element-plus/icons-vue'

    const activeName =  ref("0")
    const homeWork  =  ref(true)
    const basicShow =  ref(true)
    const progress  =  ref(false)
    const student = ref([
        {
            name: '张三同学',
            codes: '9787107185069',
            classes: '计算机科学与技术25级1班',
            status: '未完成/已完成',
            add_times: '2025-9-15 15:06:54',
        },{
            name: '张三同学',
            codes: '9787107185069',
            classes: '计算机科学与技术25级1班',
            status: '未完成/已完成',
            add_times: '2025-9-15 15:06:54',
        },{
            name: '张三同学',
            codes: '9787107185069',
            classes: '计算机科学与技术25级1班',
            status: '未完成/已完成',
            add_times: '2025-9-15 15:06:54',
        },{
            name: '张三同学',
            codes: '9787107185069',
            classes: '计算机科学与技术25级1班',
            status: '未完成/已完成',
            add_times: '2025-9-15 15:06:54',
        },{
            name: '张三同学',
            codes: '9787107185069',
            classes: '计算机科学与技术25级1班',
            status: '未完成/已完成',
            add_times: '2025-9-15 15:06:54',
        },
    ]);
    const knowledge = ref([
        {
            name: '知识点名称',
            chapter: '知识点所在章节名称知识点所在章节名称知识点所在章节名称',
            papernum: '25',
            papertate: '26%'
        },{
            name: '知识点名称',
            chapter: '知识点所在章节名称知识点所在章节名称知识点所在章节名称',
            papernum: '25',
            papertate: '26%'
        },{
            name: '知识点名称',
            chapter: '知识点所在章节名称知识点所在章节名称知识点所在章节名称',
            papernum: '25',
            papertate: '26%'
        },
    ]);
    const pager = ref([
        {
            name: '试题名称',
            knowledge: '知识点名称',
            anster_true: 20,
            anster_false: 30,
            anster_no: 40,
            papertate: '26%'
        },{
            name: '试题名称',
            knowledge: '知识点名称',
            anster_true: 20,
            anster_false: 30,
            anster_no: 40,
            papertate: '26%'
        },{
            name: '试题名称',
            knowledge: '知识点名称',
            anster_true: 20,
            anster_false: 30,
            anster_no: 40,
            papertate: '26%'
        },{
            name: '试题名称',
            knowledge: '知识点名称',
            anster_true: 20,
            anster_false: 30,
            anster_no: 40,
            papertate: '26%'
        },{
            name: '试题名称',
            knowledge: '知识点名称',
            anster_true: 20,
            anster_false: 30,
            anster_no: 40,
            papertate: '26%'
        },
    ]);
    const handleClick = (index) => {
        if( index.props.name == 0 ){
            homeWork.value = true
        } else if( index.props.name == 1 ){
            homeWork.value = false
        }
    }
</script>
<style scoped>
    .homework-box{width: 100%;background: #fff;padding: 20px 0 20px 0;border-radius: 8px;}
    .top-work{display: flex;flex-direction: row;justify-content: space-between;margin: 20px;}
    .topwork-item{box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); border-radius: 10px;background: linear-gradient( 135deg, #E4EFFE 0%, #E5F1FD 100%);height: 80px;display: flex;flex-direction: row;padding: 20px;flex: 0 0 20%;cursor: pointer;}
    .topwork-item .left{display: flex;flex-direction: column;flex: 0 0 80%;display: flex;flex-direction: column;align-items: start;justify-content: center;}
    .topwork-item .left .item-li{text-align: left;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;}
    .topwork-item .left .item-desc{text-align: left;margin-top: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;font-weight: 600;}
    .topwork-item .right{display: flex;flex-direction: row;flex: 0 0 20%;justify-content: end;align-items: center;}
    .topwork-item .right img{width: 50px;height: 50px;}
    .tabs{margin: 20px 20px 0 20px;}
    :deep(.el-tabs__active-bar){background: #1465E1;}
    :deep(.el-tabs__item.is-active){color: #1465E1;}
    :deep(.el-tabs__item:hover){color: #1465E1;}
    :deep(.el-input){flex: 0 0 10%;height: 35px;}
    :deep(.el-select){flex: 0 0 10%;height: 35px;}
    :deep(.el-select__wrapper){height: 35px;}
    :deep(.el-input__wrapper){background: #F2F3FA!important;}
    :deep(.el-table__row:nth-child(odd)){background: #ffffff!important;}
    :deep(.el-table__row:nth-child(even)){background: #F5F8FE!important;}
    :deep(.el-table th.el-table__cell) { background: #C4D8F5; }
    :deep(.el-table .cell){color: #000;}
    .search-row { padding: 0 20px; }
    .search-item { width: 100%;display: flex;flex-direction: row;gap: 20px; }
    .el-button:hover{color: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary{background: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary:hover{color: #fff!important;}
    .table-area { background: white; border-radius: 4px; padding: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
    .table-area .text{ width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .pages{display: flex;flex-direction: row;justify-content: end;padding-top: 30px;}
    .stu-point{width: calc(100% - 40px);height: 400px;background: #3D61F7;border-radius: 20px;position: relative;margin: 0 20px 0 20px;}
    .stu-point .point-div{width: calc(100% - 12px);height: calc(400px - 4px);background: #fff;border-radius: 20px;position: absolute;left: 6px;top: 2px;display: flex;flex-direction: row;}
    .point-div .left{box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);min-width: 200px;margin: 20px;height: 90%;border-radius: 10px;display: flex;flex-direction: column;align-items: center;justify-content: space-between; }
    .point-div .left .basic{display: flex;flex-direction: column;margin-top: 20px;}
    .point-div .left .infos{display: flex;flex-direction: column;margin-bottom: 30px;}
    .point-div .left img{width: 100px;height: 100px;margin-top: 10px;}
    .point-div .left .names{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 18px;font-weight: 600;margin-top: 10px; }
    .point-div .left .classes{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;color: #0B37AA;background: rgba(56,105,231,0.2);border: 1px solid #3869E7;border-radius: 5px;padding: 3px 5px 3px 5px;margin-top: 50px; }
    .point-div .left .times{ border-radius: 5px;padding: 3px 5px 3px 5px;margin-top: 10px;display: flex;flex-direction: column;background: rgba(90,202,69,0.2);border: 1px solid #5ACA45; }
    .point-div .left .times span{font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;color: #217F10;}
    .point-div .right{margin: 20px;width: 100%;overflow: hidden; }
    .class-title{display: flex;flex-direction: row;align-items: center;}
    .class-title .lefts{height: 15px;width: 5px;background: #0457D5;border-radius: 5px;margin-left: 15px;}
    .class-title .rights{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;font-weight: 600;}
    .scrollbar-demo-item{ display: flex; align-items: center; justify-content: space-between; height: 30px; margin: 10px; padding: 5px 10px 5px 10px; text-align: center; border-radius: 4px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px; }
    .scrollbar-demo-item:nth-child(odd){ background: #F5F8FE; }
    .el-progress--line { width: 200px; }
    .table-header{background: linear-gradient( 135deg, #2E7CF4 0%, #0457D5 100%);border-radius: 10px 10px 0px 0px;display: flex;flex-direction: row;height: 60px;align-items: center;justify-content: space-between; padding: 0 20px 0 20px; }
    .table-header .header-item .title{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;color: #fff; }
    .table-header .header-item .desc{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 22px;color: #fff;font-weight: 600;margin-left: 10px; }
    .operations{width: 60px;height: 30px;line-height: 30px;text-align: center;border-radius: 5px; }
    .operations.trues{ background: rgba(90,202,69,0.2);color: #2AB50F; }
    .operations.falses{ background: rgba(212,66,74,0.2);color: #D4424A; }
    .operations .answer{ color: #2AB50F; }
    .trues .useranswer{color: #2AB50F;}
    .falses .useranswer{color: #D4424A;}
</style>